<div id="tpl">
  <hgroup>
    <h1>{{ title }}</h1>
    <h2 class="" style="color:aqua" v-text="subtitle"></h2>
  </hgroup>

  <section>
    <p> {{ description }}</p>
    <button v-on:click="login">login</button>
    <button @click="registry">registry</button>
    <a :href="action"></a>

  </section>
  
  <p v-html="comment"></p>

  <form v-bind:action="action">
    <input type="text" v-model="username" />
  </form>
</div>

<pre>
  &lt;div&gt;
    &lt;h1&gt;{{ title }}&lt;/h1&gt;

    &lt;ul&gt;
      {#each users } 
        &lt;li&gt;{{ name }}&lt;/li&gt;
        &lt;li&gt;{{ email }}&lt;/li&gt;
        &lt;li&gt;{{ phone }}&lt;/li&gt;
        &lt;li&gt;
          &lt;ul&gt;
            {#each friends }
              &lt;li&gt;{{ . }}&lt;/li&gt;
            {/each}
          &lt;/ul&gt;
        &lt;/li&gt;
      {/each}
    &lt;/ul&gt;

    &lt;ol&gt;
      {#each colors}
        &lt;li&gt;{{ . }}&lt;/li&gt;
      {/each}
    &lt;/ol&gt;

    {#if login} 
      &lt;p&gt;hello, admin&lt;/p&gt;
    {#else} 
      &lt;p&gt;please login&lt;/p&gt;
    {/if}
  &lt;/div&gt;

</pre>

<script src="./src/dom/mustache.ts" type="module"></script>
